<template>
  <div>
    <!--  -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm formSearch"
    >
      <el-form-item prop="search">
        <el-input
          placeholder="请输入搜索内容"
          v-model="ruleForm.search"
        ></el-input>
      </el-form-item>
      <el-form-item prop="option">
        <el-select v-model="ruleForm.option" placeholder="请选择搜索类型">
          <el-option label="ID" value="_id"></el-option>
          <el-option label="账号" value="adminName"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >搜索</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <!--  -->

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="Date" prop="date"> </el-table-column>
      <el-table-column label="_id" prop="_id"> </el-table-column>
      <el-table-column label="Name" prop="adminName"> </el-table-column>

      <el-table-column align="right">
        <template slot="header" slot-scope="scope"> 操作 </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "admin-list",
  data() {
    var vali_search = (rule, value, callback) => {
      if (!value) return callback(new Error("搜索内容不能为空"));
      callback();
    };
    var vali_option = (rule, value, callback) => {
      if (!value) return callback(new Error("搜索类型不能为空"));
      callback();
    };
    return {
      ruleForm: {
        search: "",
        option: "",
      },
      rules: {
        search: [{ validator: vali_search, trigger: "blur" }],
        option: [{ validator: vali_option, trigger: "change" }],
      },
      //
      tableData: [],
      search: "",
      page: 1,
      total: 100,
      limit: 10,
    };
  },
  mounted() {
    this.getAll();
  },
  methods: {
    getAll() {
      const req = {
        page: this.page,
        limit: this.limit,
      };
      console.log(req);
      this.$store.dispatch("admin/get", req).then((res) => {
        console.log(res);
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    handleEdit(row) {
      this.$router.push(`/admin/edit/${JSON.stringify(row)}`);
    },
    handleDelete(row) {
      const _that = this;
      const h = this.$createElement;
      this.$msgbox({
        title: "删除管理员",
        message: h("p", null, [
          h("h6", null, "该操作不可逆"),
          h("p", { style: "color: teal" }, `管理员:${row.adminName}`),
          h("p", { style: "color: teal" }, `ID:${row._id}`),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            // setTimeout(() => {
            //   done();
            //   setTimeout(() => {
            //     instance.confirmButtonLoading = false;
            //   }, 300);
            // }, 3000);
            _that.$store.dispatch("admin/del", row._id).then((res) => {
              if (res.deletedCount) {
                done();
              }
            });
          } else {
            done();
          }
        },
      }).then((action) => {
        console.log("action::::", action);
        this.$message({
          type: "info",
          message: `管理员${row.adminName}删除成功`,
        });
        _that.getAll();
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.getAll();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getAll();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          let obj = {};
          obj[`${this.ruleForm.option}`] = this.ruleForm.search;
          console.log(obj);
          this.$store.dispatch("admin/search", obj).then((res) => {
            console.log(res);
            this.tableData = res;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getAll();
    },
  },
};
</script>

<style lang="scss" scoped>
.formSearch {
  display: flex;
}
</style>